<!-- 资料管理 -->
<style lang="less" scoped>
.flood {
  margin: 15px;
  .ivu-tabs-bar {
    margin-bottom: 0px;
  }
  .new-paragraph {
    margin-top: 5px;
  }
  .full-img {
    width: 100%;
    height: 245px;
  }
  .overview {
    width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .showCard {
    height: 380px;
    overflow: hidden;
    margin: 5px;
  }
  .iconWidth {
    font-size: 24px;
    width: 49%;
    display: inline-block;
    text-align: center;
    background: #f0f0f0;
    color: #363636;
    margin-top: 5px;
  }
}
.demo-spin-icon-load {
  margin-bottom: 20px;
  animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.demo-spin-col {
  height: 100px;
  position: relative;
  border: 1px solid #eee;
}
</style>


<template>
  <div class="flood">
    <Card :bordered="false">
      <p slot="title"
         class="white">资料管理</span>
      </p>
      <div>
        <Button type="primary"
                icon="ios-cloud-upload-outline"
                @click.native="uploadfile"
                style="margin-right: 15px">上传资料</Button>
        <Button type="success"
                icon="ios-folder"
                @click.native="fileModal = true"
                style="margin-right: 15px">新建文件夹</Button>
        <Button type="info"
                v-if="showDon"
                @click.native="downloadfile"
                style="margin-right: 15px">下载资料</Button>
        <Button type="error"
                v-if="selectData.length > 0"
                @click.native="del1"
                style="margin-right: 15px">删除资料</Button>
      </div>
    </Card>
    <Breadcrumb>
      <BreadcrumbItem style="cursor: pointer;"
                      v-for="item in breadData"
                      :key="item.refer_name"
                      @click.native="changeBread(item)">{{item.refer_name}}</BreadcrumbItem>
    </Breadcrumb>

    <Table @on-selection-change="showSelect"
           :data="Data"
           :loading="loading"
           :columns="dataColumns"
           stripe>
      <div slot="loading">
        <Icon type="ios-loading"
              size=30
              class="demo-spin-icon-load"></Icon>
        <div style="font-size:18px">加载中...</div>
      </div>
    </Table>
    <Page class="pull-right dingwei"
          :total="Page.total"
          :current="Page.current"
          :page-size="Page.pageSize"
          size="small"
          show-total
          @on-change="changePage" />
    <del-modal title="资料"
               :url="urlDataDel"
               :delArr="selectData"
               @del="del"
               ref="delModal"></del-modal>
    <Modal v-model="dataModal"
           title="上传资料"
           width="600"
           :mask-closable="false">
      <Upload type="drag"
              :data="uploadData"
              :on-success="handleSuccess"
              :on-error="handleError"
              :action="urlDataNew2">
        <div style="padding: 20px 0">
          <Icon type="ios-cloud-upload"
                size="52"
                style="color: #3399ff"></Icon>
          <p>上传资料</p>
        </div>
      </Upload>
    </Modal>
    <Modal v-model="fileModal"
           title="新建文件夹"
           @on-ok="addRefer"
           :mask-closable="false"
           width="600">
      <Form :model="fileItem"
            :label-width="80">
        <Form-item label="文件夹名称"
                   prop="refer_name">
          <Input v-model="fileItem.refer_name"
                 :maxlength="16"
                 placeholder="请输入文件夹名称" />
        </Form-item>
      </Form>
    </Modal>

  </div>
</template>


<script>
import { ajaxPost } from 'global/axios';
import storage from 'good-storage';
import delModal from 'public/delModal';
import { domain, domain2 } from 'global/setting';
export default {
  components: {
    'del-modal': delModal,
  },
  data() {
    return {
      urlDataList: '/bus/backupfile/list',
      urlDataNew: '/bus/backupfile/new',
      urlDataDel: '/bus/backupfile/del',
      urlDownload: '/filemanage/download',
      urlDataNew2: '',
      actionPage: '1',
      showDon: false,
      loading: false,
      breadData: [
        {
          refer_level: 0,
          refer_name: '根目录',
          refer_no: 'empty',
        },
      ],
      Page: {
        current: 1,
        pageSize: 13,
        total: 0,
      },
      uploadData: {},
      modal2: false,
      fileModal: false,
      fileItem: {
        refer_name: '',
      },
      refer_level: '1',
      Data: [],
      dataColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left',
        },
        {
          title: '文件名',
          width: 900,
          render: (h, param) => {
            if (param.row.isFolder === 'true') {
              return h('div', [
                h('Icon', {
                  props: {
                    type: 'ios-folder',
                  },
                  style: {
                    marginRight: '5px',
                  },
                }),
                h(
                  'a',
                  {
                    on: {
                      click: () => {
                        this.breadData.push(param.row);
                        this.saveRow = param.row;
                        this.refer_level = parseInt(param.row.refer_level) + 1;
                        this.getTableData(1, param.row.refer_no);
                      },
                    },
                  },
                  param.row.refer_name
                ),
              ]);
            } else {
              return h('div', [
                h('Icon', {
                  props: {
                    type: 'document-text',
                  },
                  style: {
                    marginRight: '5px',
                  },
                }),
                h('span', {}, param.row.refer_name),
              ]);
            }
          },
        },
        {
          title: '创建人',
          key: 'createbyname',
        },
        {
          title: '创建时间',
          key: 'createdt',
        },
      ],
      dataModal: false,
      selectData: [],
      saveRow: {
        refer_no: 'empty',
      },
    };
  },
  methods: {
    getTableData(page, parent) {
      this.loading = true;
      setTimeout(() => {
        let params = {
          data: {
            page,
            pageSize: this.Page.pageSize,
            searchValue: {
              parent,
            },
          },
          url: this.urlDataList,
          token: storage.session.get('token'),
          success: res => {
            this.Data = res.data.result.result;
            this.$Loading.finish();
            this.Page.total = res.data.result.totalSize;
            this.loading = false;
          },
        };
        ajaxPost(params);
      }, 500);
    },
    handleError() {
      this.$Message.warning({
        content: '上传失败',
      });
    },
    handleSuccess(res) {
      console.log(res);
      if (res.code === '0000') {
        this.$Loading.finish();
        this.$Message.success({
          content: '上传成功',
        });
        this.dataModal = false;
        this.getTableData(this.actionPage, this.saveRow.refer_no);
      } else {
        this.$Message.warning({
          content: res.message,
        });
      }
    },
    changePage(page) {
      this.getTableData(page, this.saveRow.refer_no);
      this.actionPage = page;
    },
    showSelect(data) {
      this.selectData = data; // 把勾选的数组存起来
      if (this.selectData.length === 1) {
        if (this.selectData[0].isFolder === 'false') {
          this.showDon = true;
        } else {
          this.showDon = false;
        }
      } else {
        this.showDon = false;
      }
    },
    del1() {
      if (this.selectData.length > 0) {
        this.$refs.delModal.showModal();
      } else {
        this.$Message.warning('请选择资料');
      }
    },
    del() {
      this.selectData = [];
      this.getTableData(this.actionPage, this.saveRow.refer_no);
    },
    addRefer() {
      let params = {
        data: {
          isFolder: 'true',
          refer_level: this.refer_level,
          refer_name: this.fileItem.refer_name,
        },
        url: this.urlDataNew,
        token: storage.session.get('token'),
        success: res => {
          if (res.data.code === '0000') {
            this.$Loading.finish();
            this.$Message.success({
              content: '新增成功',
            });
            this.getTableData(this.actionPage, this.saveRow.refer_no);
          } else {
            this.$Message.warning({
              content: res.data.message,
            });
          }
        },
      };
      if (this.refer_level !== '1') {
        params.data.parent = this.saveRow.refer_no;
      }
      ajaxPost(params);
    },
    uploadfile() {
      $('.ivu-upload-list').html('');
      this.dataModal = true;
      this.uploadData = {
        isFolder: 'false',
        refer_level: this.refer_level,
      };
      if (this.refer_level !== '1') {
        this.uploadData.parent = this.saveRow.refer_no;
      }
    },
    downloadfile() {
      let url2 = domain2 + this.selectData[0].refer_path;
      fetch(url2).then(res =>
        res.blob().then(blob => {
          let a = document.createElement('a');
          let url = window.URL.createObjectURL(blob);
          let filename = this.selectData[0].refer_name;
          a.href = url;
          a.download = filename;
          a.click();
          window.URL.revokeObjectURL(url);
        })
      );
    },
    changeBread(row) {
      this.getTableData(1, row.refer_no);
      let index = this.breadData.indexOf(row);
      if (index + 1 !== this.breadData.length) {
        this.breadData = this.breadData.splice(0, index + 1);
      }
    },
  },
  mounted() {
    this.urlDataNew2 = `${domain}/bus/backupfile/new?token=${storage.session.get(
      'token'
    )}`;
    this.getTableData(1, 'empty');
  },
};
</script>
